<!--
 * @Author: zayyo
 * @Date: 2022-07-23 14:47:35
 * @LastEditors: zayyo
 * @LastEditTime: 2022-07-23 18:13:22
 * @FilePath: \vue-echarts-demo\src\views\Test6.vue
 * @Description: test
-->

<template>
  <div class="demo">
    <div id="top"></div>
    <div id="center"></div>
    <div id="footer"></div>
  </div>
</template>

<script>
import 'echarts-gl'
import a from '../assets/earth.jpg'
import b from '../assets/starfield.jpg'
export default {
  name: 'Test6',

  mounted() {
    const chartDom = document.getElementById('footer')
    const myChart = this.$echarts.init(chartDom)
    let option = {
      series: [
        {
          type: 'pie',
          data: [
            {
              value: 100,
              name: 'A'
            },
            {
              value: 200,
              name: 'B'
            },
            {
              value: 300,
              name: 'C'
            },
            {
              value: 400,
              name: 'D'
            },
            {
              value: 500,
              name: 'E'
            }
          ],
          roseType: 'area'
        }
      ]
    }
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)

    // 第二个图
    // 拿到DOM元素
    let chartDom1 = document.getElementById('center')
    //  初始化echarts
    var myChart1 = this.$echarts.init(chartDom1)
    //  数据
    var data = []
    for (var t = 0; t < 25; t += 0.001) {
      var x = (1 + 0.25 * Math.cos(75 * t)) * Math.cos(t)
      var y = (1 + 0.25 * Math.cos(75 * t)) * Math.sin(t)
      var z = t + 2.0 * Math.sin(75 * t)
      data.push([x, y, z])
    }
    // 配置
    let option1 = {
      tooltip: {},
      backgroundColor: '#fff',
      visualMap: {
        show: false,
        dimension: 2,
        min: 0,
        max: 30,
        inRange: {
          color: [
            '#313695',
            '#4575b4',
            '#74add1',
            '#abd9e9',
            '#e0f3f8',
            '#ffffbf',
            '#fee090',
            '#fdae61',
            '#f46d43',
            '#d73027',
            '#a50026'
          ]
        }
      },
      xAxis3D: {
        type: 'value'
      },
      yAxis3D: {
        type: 'value'
      },
      zAxis3D: {
        type: 'value'
      },
      grid3D: {
        viewControl: {
          projection: 'orthographic'
        }
      },
      series: [
        {
          type: 'line3D',
          data: data,
          lineStyle: {
            width: 4
          }
        }
      ]
    }
    // 使用刚指定的配置项和数据显示图表。
    myChart1.setOption(option1)

    // 第三个图

    var chartDom2 = document.getElementById('top')
    var myChart2 = this.$echarts.init(chartDom2)

    let option2 = {
      backgroundColor: '#000',
      globe: {
        baseTexture: a,
        shading: 'lambert',
        environment: b,
        atmosphere: {
          show: true
        },
        light: {
          ambient: {
            intensity: 0.1
          },
          main: {
            intensity: 1.5
          }
        }
      },
      series: []
    }

    myChart2.setOption(option2)
  }
}
</script>

<style scoped>
#top {
  height: 500px;
  width: 500px;
}

#center {
  height: 500px;
  width: 500px;
}
#footer {
  height: 500px;
  width: 500px;
}
</style>
